// JobAlumnuInfo.js
import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet } from 'react-native'
import { ScaleS, ScaleT, ONE_PIXEL } from 'src/utils/ScreenUtil'
import {
  settlementMethod as settlementMethodList
} from 'src/utils/ConfigUtil'
import { utilToKilo } from 'src/utils/TimeUtil'

const dateList = ['小时', '天', '周', '月', '次']
export default class JobContent extends React.PureComponent {
  static propTypes = {
    data: PropTypes.object,
    postWorkLocations: PropTypes.array
  }

  render () {
    const { data, postWorkLocations = [] } = this.props
    return (
      <View style={styles.container}>
        <View style={styles.basicInfo}>
          <View style={styles.basicInfoTop}>
            <Text style={styles.name}>{data.name}</Text>
            <Text style={styles.unit}>{utilToKilo(data.salary)}{data.salary >= 10000 ? '' : '元'}·{dateList[data.unit]}</Text>
          </View>
          <View style={styles.basicInfoButtom}>
            <Text style={styles.marginRight}>#{data.category}</Text>
            <Text style={styles.marginRight}>#{postWorkLocations[0] && postWorkLocations[0].areaName}</Text>
            <Text style={styles.marginRight}>#{settlementMethodList[data.settlementMethod].short}</Text>
          </View>
        </View>
        <View style={styles.desView}>
          <Text style={styles.des}>
            {data.workContent}
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: ScaleS(18),
    marginTop: ScaleS(26)
  },
  title: {
    marginLeft: ScaleS(2),
    fontSize: ScaleT(25),
    color: '#000000',
    fontWeight: '500',
    lineHeight: ScaleS(35),
    height: ScaleS(35)
  },
  desView: {
    borderBottomWidth: ONE_PIXEL,
    borderColor: 'rgba(151, 151, 151, 0.2)',
    paddingBottom: ScaleS(16)
  },
  des: {
    fontSize: ScaleT(15),
    fontWeight: '300',
    color: 'rgba(60, 60, 60, 1)',
    lineHeight: ScaleS(28)
  },
  basicInfo: {
    paddingBottom: ScaleS(24),
    borderBottomWidth: ONE_PIXEL,
    borderColor: 'rgba(151, 151, 151, 0.2)',
    marginBottom: ScaleS(22)
  },
  basicInfoButtom: {
    flexDirection: 'row'
  },
  basicInfoTop: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: ScaleS(16)
  },
  marginRight: {
    color: 'rgba(204, 204, 204, 1)',
    marginRight: ScaleS(15)
  },
  name: {
    fontSize: ScaleS(16),
    color: 'rgba(0, 0, 0, 1)'
  },
  unit: {
    fontSize: ScaleS(16),
    color: 'rgba(250, 222, 37, 1)',
    fontWeight: 'bold'
  }
})
